<script setup lang="ts">
const props = defineProps({
  modelValue:{

  }
})
const emits= defineEmits(['update:modelValue'])
const inputList = ref([])

const handInputChange=()=> {
  emits('update:modelValue',JSON.stringify(inputList.value))
}

const initData=()=> {

  if (props.modelValue) {
    try {
      inputList.value = JSON.parse(props.modelValue)
    } catch (e) {

    }
  }
}

watch(()=>props.modelValue,()=> {
  initData()
})

const handAddRow =()=> {
  inputList.value.push({
    key: '',
    value: ''
  })
  handInputChange()
}

const handleDelete=(index)=> {
   inputList.value.splice(index,1)
  handInputChange()
}
</script>

<template>



  <el-table :data="inputList">
    <el-table-column label="属性名">
      <template #default="{ row }">
        <el-input @change="handInputChange" v-model="row.key"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="属性值">
      <template #default="{ row }">
        <el-input @change="handInputChange" v-model="row.value"></el-input>
      </template>
    </el-table-column>


    <el-table-column label="操作">
      <template #default="{ row ,$index}">
        <el-button type="danger" @click="handleDelete($index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" @click="handAddRow">增加</el-button>
</template>

<style scoped lang="scss">

</style>
